<template>
	<view class="page-container">
        <view class="subsection flex justify-between">
            <u-icon name="arrow-left" size="20" @click="changeWeek('-')" />
            <view v-for="(item,index) in dates"
                :key="index"
                :class="['flex1 text-center', item.day === selectedDay ? 'selected' : '']"
                @click="loadData(item.day)">
                <view>{{ item.week }}</view>
                <view>{{ item.day == today ? '今天' : item.day.substring(5) }}</view>
            </view>
            <u-icon name="arrow-right" size="20" @click="changeWeek('+')" />
            <u-icon name="grid-fill" color="green" size="35" @click="showCalendar = true" />
        </view>

        <u-calendar v-model="showCalendar" mode="date" @change="changeDate" />
        
        <!-- 以下同级的还有导航 -->
        <view class="mt-10">
            <view v-if="courses.length === 0" class="text-center mt-50">
                <view><u-icon name="shopping-cart" size="200" class="color-gray mb-5" /></view>
                <text class="color-gray">暂无数据</text>
            </view>
            <navigator v-for="(item,index) in courses" :key="index" 
                :url="'/pages/teacher/course-sign?id=' + item.id"
                class="bg-light mb-3 p-3  rounded-lg"
                open-type="navigate"
                hover-class="navigator-hover"
                >
                <view class="font-bold py-2 border-b-solid border-1 border-gray mb-2 flex justify-between">
                    <text class="flex-1">{{ item.course.name }}</text>
                    <u-button v-if="item.status == 1" size="mini" icon="checkbox-mark" style="color:red;">
                        <u-icon  name="checkbox-mark" :size="23" color="red" />已签到</u-button>
                </view>
                <view class="line-height-loose text-sm"><u-icon name="clock" />&nbsp;时间: {{ item.dateTime.substring(0, 16) }}</view>
                <view class="line-height-loose text-sm"><u-icon name="home" />&nbsp;班级: {{ item.class.name }}</view>
                <view class="line-height-loose text-sm"><u-icon name="map" />&nbsp;教室：{{ item.room.name }}</view>
                <view class="line-height-loose text-sm"><u-icon name="account" />&nbsp;学员：{{item.class.total_num}}人</view>
            </navigator>
         </view>
         <!-- 导航栏 -->
        <teacher-tabbar></teacher-tabbar>
    </view>
</template>
<script lang="ts" setup>
    import dayjs from 'dayjs';
    import updateLocale from 'dayjs/plugin/updateLocale';
    import { http } from '@/utils/http';
    import { ref, defineOptions, onMounted } from 'vue';
    import { onShow, onReachBottom } from '@dcloudio/uni-app';
    import teacherTabbar from './components/tabbar.vue'
    
    // 配置dayjs
    dayjs.extend(updateLocale);
    dayjs.updateLocale('en', { weekStart: 1 })

    const showCalendar = ref(false)
    const searchQuery = ref({
        status: 0,
        page: 1,
        date: ''
    })

    const courses = ref([])
    const today = ref(dayjs().format('YYYY/MM/DD'))
    const selectedDay = ref('')
    
    // 使用dayjs获取当前这一周的日期，从周一开始
    
    const dates = ref([])
    const getWeekDays = (day) => {
        const weeks = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        while(dates.value.length) {
            dates.value.pop()
        }
        for (let i = 0; i < 7; i++) {
            const date = dayjs(day).startOf('week').add(i, 'day').format('YYYY/MM/DD')  // 从周一累加
            dates.value.push({day: date, week: weeks[i]})
        }
    }

    getWeekDays(dayjs().format('YYYY/MM/DD'))

    defineOptions({
        name: 'teacher'
    });
    onShow(() => { console.log('teacher onShow') })
    
    onMounted(() => {
        loadData(today.value)
    })

    const loadData = (date) => { 
        if (date == selectedDay.value) 
            return
        courses.value = [] // 清空数组，防止重复加载
        selectedDay.value = date
        searchQuery.value.date = date.replaceAll('/', '-')
        uni.showLoading({ title: '加载中...' })
        http.post('/api-mini/teacher/courses', searchQuery.value).then(res => {
            uni.hideLoading()
            const response = res as ApiResponse
            courses.value = response.data
            courses.value.forEach(item => {
                item.dateTime = item.date + ' ' + item.time
            })
            
        }).catch(err => {
            console.log(err);
        })
    }
    const changeWeek = (type) => {
        const day = type == '+'? 7 : -7;
        dates.value.map(item => {
            item.day = dayjs(item.day, 'YYYY/MM/DD').add(day, 'day').format('YYYY/MM/DD')
            return item;
        })
        if(type == '-') {
            loadData(dates.value[6].day)
        } else {
            loadData(dates.value[0].day)
        }
    }

    const changeDate = (e) => {
        const date = dayjs(e.result).format('YYYY/MM/DD')
        getWeekDays(date)
        loadData(date)
    }
</script>

<style lang="scss">
.subsection {
    width: 96vw;
    position:fixed;
    top: 0;
    padding-top:2vw;
    left: 2vw;
    overflow: hidden;
    z-index: 100;
    overflow: hidden;
    background-color: #fff;
    font-size: 12px;

    .selected{
        color: green;
    }
}

.u-calendar uni-view {
    display: inline-block;
}

.u-calendar__action {
    width: 100%;
    text-align: center;
}
</style>